<template>
<!--使用draggable组件-->
<div class="drag-page">
  <div class="desc-title">上下拖拽卡片调整顺序</div>
  <div class="drag-content">
    <div class="small-part">
      <draggable
        :list="dragListSmall"
        dragClass="dragClass1"  
        ghostClass="ghostClass1" 
        chosenClass="chosenClass1" 
        @start="onStart" 
        @end="onEnd(dragListSmall,dragListBig)"
      >
        <transition-group>
          <el-col
            v-show="item.display"
            v-for="item in dragListSmall"
            :key="item.sort"
            :class="{'cardStyle2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','cardStyle1':item.cardCode !='bigCalendar'}"
          >
            <el-card shadow="hover">{{ item.cardName }}</el-card>
          </el-col>
        </transition-group>
      </draggable>
    </div>
    <div class="big-part">
      <draggable
        :list="dragListBig"
        dragClass="dragClass2"  
        ghostClass="ghostClass2" 
        chosenClass="chosenClass2" 
        @start="onStart" 
        @end="onEnd(dragListSmall,dragListBig)"
      >
        <transition-group>
          <el-col
            v-show="item.display"
            v-for="item in dragListBig"
            :key="item.sort"
            :class="{'cardStyle2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','cardStyle1':item.cardCode !='bigCalendar'}"
          >
            <el-card shadow="hover">{{ item.cardName }}</el-card>
          </el-col>
        </transition-group>
      </draggable>
    </div>
    <!-- <div class="small-part" style="display:inline-block;width: 29%;">
      <draggable
        :list="dragListSmall"
        dragClass="dragClass"  
        ghostClass="ghostClass" 
        chosenClass="chosenClass" 
        @start="onStart" 
        @end="onEnd(dragListSmall)"
      >
        <transition-group>
          <el-col
            v-show="item.display"
            v-for="item in dragListSmall"
            :key="item.sort"
            :span="7*item.span"
            :class="{'cardStyle2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','cardStyle1':item.cardCode !='bigCalendar'}"
          >
            <el-card shadow="hover">{{ item.cardName }}</el-card>
          </el-col>
        </transition-group>
      </draggable>
    </div>
    <div class="big-part" style="display:inline-block;width: 58%;">
      <draggable
        :list="dragListBig"
        dragClass="dragClass"  
        ghostClass="ghostClass" 
        chosenClass="chosenClass" 
        @start="onStart" 
        @end="onEnd(dragListBig)"
      >
        <transition-group>
          <el-col
            v-show="item.display"
            v-for="item in dragListBig"
            :key="item.sort"
            :span="7*item.span"
            :class="{'cardStyle2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','cardStyle1':item.cardCode !='bigCalendar'}"
          >
            <el-card shadow="hover">{{ item.cardName }}</el-card>
          </el-col>
        </transition-group>
      </draggable>
    </div> -->
    <!-- <draggable v-model="dragLists">
      <transition-group>
        <div
          v-for="dragList in dragLists"
          :key="dragList.index"
          class="drag-item"
        >
          <draggable
            :list="dragList.items"
            dragClass="dragClass"  
            ghostClass="ghostClass" 
            chosenClass="chosenClass" 
            @start="onStart" 
            @end="onEnd(dragLists)"
          >
          <transition-group>
            <el-col
              v-show="item.display"
              v-for="item in dragList.items"
              :key="item.sort"
              :span="7*item.span"
              :class="{'cardStyle2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','cardStyle1':item.cardCode !='bigCalendar'}"
            >
              <el-card shadow="hover">{{ item.cardName }}</el-card>
            </el-col>
          </transition-group>
          </draggable>
        </div>
      </transition-group>
    </draggable> -->
  </div>
</div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
import {getCardList} from '@/api/workStation/workStation.js'
export default {
  props:['componentArrs'],
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return { 
      isDraggable:true,
      currentSort:JSON.parse(JSON.stringify(this.componentArrs)),
      dragListSmall:[],
      dragListBig:[],
      dragLists: [
        {
          index: 1,
          items:[
            /* {
              sort:1,
              cardCode:'workCalendar',
              cardName:'工作历',
              desc:'工作历',
              display:true,
              span:1
            },
            {
              sort:2,
              cardCode:'myApp',
              cardName:'我的应用',
              desc:'我的应用',
              display:true,
              span:2
            },
            {
              sort:3,
              cardCode:'productionCockpit',
              cardName:'生产驾驶舱',
              desc:'生产驾驶舱',
              display:true,
              span:1
            },
            {
              sort:4,
              cardCode:'dutyToday',
              cardName:'今日值班',
              desc:'今日值班',
              display:true,
              span:1
            },
            {
              sort:5,
              cardCode:'focusWork',
              cardName:'我关注的工作',
              display:true,
              desc:'我关注的工作',
              span:1
            },
            {
              sort:6,
              cardCode:'jobAccount',
              cardName:'工作统计',
              desc:'工作统计',
              display:true,
              span:1
            },
            {
              sort:7,
              cardCode:'undoItem',
              cardName:'待办事项',
              desc:'待办事项',
              display:true,
              span:1
            } */
          ]
        },
        {
          index: 2,
          items: []
        },
        {
          index: 3,
          items: []
        }
      ],
    };
  },
  mounted(){
    this.init()
  },
  watch:{
    componentArrs: {
      handler(val) {
        this.getCardData(val)
      },
    },
  },
  methods: {
    init(){
      this.getCardData(this.componentArrs)
    },
    /* dragstart(value) {
      this.oldData = value;
    },

    // 记录移动过程中信息
    dragenter(value, e) {
      this.newData = value;
      e.preventDefault();
    },
    // 拖拽最终操作
    dragend(value, e) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.currentSort.indexOf(this.oldData);
        let newIndex = this.currentSort.indexOf(this.newData);
        let newItems = [...this.currentSort];
        // 删除老的节点
        newItems.splice(oldIndex, 1);
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData);
        this.currentSort = [...newItems];
        this.$emit('shiftPosition',this.currentSort)
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e) {
      e.preventDefault();
    }, */
    getCardData(val){
      let currentCard = JSON.parse(JSON.stringify(val))
      if(currentCard &&currentCard.length>0){
        let bigCardArr = currentCard.filter(item =>{
          return item.cardCode =="myApp" || item.cardCode =="bigCalendar" || item.cardCode =="teamCalendar"
        })
        this.dragListBig = bigCardArr
        let smallCardArr = currentCard.filter((item) => !bigCardArr.some((ele) => ele.cardCode === item.cardCode))
        this.dragListSmall = smallCardArr
      }
      //this.dragLists[0].items = currentCard
    },
    //开始拖拽事件
    onStart(val){
      this.drag=true;
    },
    //拖拽结束事件
    onEnd(val1,val2) {
      //拖拽完成之后数组的顺序
      this.drag=false;
      let newDragArr = [...val1,...val2]
      this.$emit('shiftPosition',newDragArr)
    },
  },
};
</script>
<style scoped lang="less">
.drag-content{
  display: flex;
  flex-direction: row;
  .small-part{
    width: 30%;
    display: flex;
    flex-direction: column;
  }
  .big-part{
    width: 60%;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }

}
.drag-page{
  margin: 0px 10px 17px 45px;
}
.desc-title{
  font-size: 12px;
  font-weight: 300;
  color: #999999;
  text-align: left;
  margin-bottom: 16px;
}
.el-card{
  border: 1px solid #cccccc;
}
.title{
  padding: 6px 12px;
}
.col{
  /* width: 30%; */
  width: calc((100% / 3) - 7px);
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius:4px ;
  float: left;
}
.col+.col{
 margin-left: 10px;
}
.cardStyle1{
  margin-right:20px;
  margin-bottom:20px;
  /deep/.el-card{
    padding:0px
  }
}
.cardStyle2{
  margin-right:20px;
  margin-bottom:20px;
  /deep/.el-card{
    padding:41px 82px 41px 0px;
  }
}
.item{
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border:  solid 1px #eee;
  background-color: #f1f1f1;
}
.item:hover{
  background-color: #fdfdfd;
  cursor: move;
}
.item+.item{
  border-top:none ;
  margin-top: 6px;
}
.el-col-14 {
    width: calc(58.33333% + 20px);
}

</style>